<template>
  <!--  -->
  <div class="purchaseOrderDetails">
    
    <a-descriptions title="采购订单详情" :column="{ xs: 3, sm: 3, md: 4, lg: 5 }">
        <a-descriptions-item v-for="item of sendWorkTabel" :label="item.label" :span="item.span ?? 1">
            <a-tag v-if="item.value">{{ item.value }}</a-tag>
        </a-descriptions-item>
    </a-descriptions>

    <div class="purchaseOrderDetails-content-bbiosm" :style="{ height: tableHeight }">
        <vxe-table
          :data="dataList"
          size="mini"
          show-footer
          height="100%"
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          stripe
          border
        >
          <!-- <vxe-column field="purchaseType" title="单别" width="80" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseType }}</template>
          </vxe-column>
          <vxe-column field="purchaseId" title="单号" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseId }}</template>
          </vxe-column> -->
          <vxe-column field="serialId" title="序号" width="80" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD003 }}</template>
          </vxe-column>
          <vxe-column field="productId" title="品号" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD004 }}</template>
          </vxe-column>
          <vxe-column field="productName" title="品名" width="200" align="center">
            <template #default="{ row }"> {{ row.TD005 }}</template>
          </vxe-column>
          <vxe-column field="specification" title="规格" width="180" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD006 }}</template>
          </vxe-column>
          <vxe-column field="purchasePrice" title="采购单价" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD010 }}</template>
          </vxe-column>
          <vxe-column field="purchaseNumber" title="采购数量" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD008 }}</template>
          </vxe-column>
          <vxe-column field="tax" title="税额" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD035 }}</template>
          </vxe-column>

          <vxe-column field="taxRate" title="税率" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD033 * 100 }}%</template>
          </vxe-column>

          <vxe-column field="unit" title="单位" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD009 }}</template>
          </vxe-column>

          <vxe-column field="purchaseAmount" title="税前金额" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD34 }}</template>
          </vxe-column>

          <vxe-column field="remark" title="备注" width="220" show-overflow align="center">
            <template #default="{ row }"> {{ row.TD014 }}</template>
          </vxe-column>
        </vxe-table>
      </div>
    
  </div>
  


</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './purchaseOrderDetailsModel';
export default {
  setup() {
    const {
      base,
    } = importConfig();
    return {
      ...toRefs(base)
    };
  },
};
</script>

<style lang="less" scoped>
.purchaseOrderDetails {
  position: relative;
  background: white;
  height: calc(100vh - 136px);
  box-sizing: border-box;
  padding: 20px;

  :deep(.arco-descriptions-body){
    display: flex;
  }
}
</style>
